let path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css
const TerserPlugin = require('terser-webpack-plugin');//压缩JS
const ary = ['index', 'other']
function htmlP(ary = []) {
  return ary.map(item => {
    return new htmlWebpackPlugin({
      template: `./public/${item}.html`,
      filename: `${item}.html`,
      hash: true,
      chunks: [item]// 也就是说 index.html 中要引入 other.js
    })
  })
}
function entryFn(ary) {
  let obj = {};
  ary.forEach(item => {
    obj[item] = `./src/${item}.js`
  })
  return obj
}
// console.log(htmlP(ary))

module.exports = {
  optimization:{
    minimizer:[
      // 若配置这一项 则 JS不会自动压缩了
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin()
    ]
  },
  mode: 'production',
  entry: {
    ...entryFn(ary)
  },
  output: {
    filename: '[name].[hash:5].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    ...htmlP(ary),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:5].css',
      chunkFilename:'css/[id].[hash:5].css'
    })
  ],
  module: {
    rules: [
      // 存放了各种loader
      // 工作中 我们css一般都单独合并成了一个独立的css文件 需要用到mini-css-extract-plugin
      {
        test: /\.css$/, // 匹配哪些文件(后缀是.css的文件 ) 加载css文件至少需要css-loader style-loader
        // 先用css-loader加载css文件 然后用style-loader扔到页面上
        // loader的加载顺序从右向左的 从下向上
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            esModule: true,
          }
        }, {
          loader: 'css-loader',
          options: {
            importLoaders: 2,// 先去使用后边的加载器加载
          }
        }, 'postcss-loader', 'less-loader'] // 使用什么加载器 1 直接写字符串（适用于之需要一个loader）；2 数组 多个loader 3 {需要单独配置一个属性时}
      },
      // 我们写一些 c3属性的时候 想要兼容不同的浏览器 需要使用 postcss-loader这个加载器
      // 使用 postcss-loader 需要配置 postcss.config.js这个配置文件
      // 还要告诉webpack 要兼容哪些浏览器
      {
        test: /\.less$/,
        // less首先要编译css还需要走css加载那一套
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            esModule: true,
          }
        }, 'css-loader', 'postcss-loader', 'less-loader'],
        exclude: /node_modules/ // 不会去加载 node_modules中的less文件
      }
      // {
      //   test:/\.css$/, // 匹配哪些文件(后缀是.css的文件 ) 加载css文件至少需要css-loader style-loader
      //   // 先用css-loader加载css文件 然后用style-loader扔到页面上
      //   // loader的加载顺序从右向左的 从下向上
      //   use: 'style-loader' // 使用什么加载器 1 直接写字符串（适用于之需要一个loader）；2 数组 多个loader 3 {需要单独配置一个属性时}
      // },
      // {
      //   test:/\.css$/,
      //   use:'css-loader'
      // }
    ]
  },
  devServer: {
    // hot:true//它是热更新； 只更新改变的组件或者模块 不会整体刷新页面
  }
}
